<template>
    <div class="new_project">
        <div class="left-menu">
            <div class="user_info">
                <div><img class="h50" src="../../assets/image/user@2x.png" alt="" /></div>
                <div class="user_info_content">
                    <div class="user_info_name">用户名</div>
                    <div class="user_info_introduction">这个家伙很神秘，没有写简介</div>
                </div>
            </div>
            <div class="project-menu">
                <div
                    v-for="item in asideList"
                    :key="item.key"
                    v-logAction="{
                        page: item.key,
                        item: item.value === '首页' ? 'firstPage' : 'myOrders',
                        descriptions: '用户点击' + item.value + '按钮',
                    }"
                    :class="{ active: showActiveKey === item.key }"
                    class="project-menu-box"
                    @click="handleSelect(item.key)"
                >
                    <span
                        class="menu-icon"
                        :style="{
                            backgroundImage: `url(${item.icon})`,
                        }"
                    ></span>
                    <span class="project-menu-name">{{ item.value }}</span>
                </div>
            </div>
        </div>
        <div class="content-section">
            <HomeRouteView />
        </div>
    </div>
</template>

<script lang="ts" setup>
import HomeRouteView from '@/components/HomeRouteView.vue';
import { init, asideList, handleSelect, showActiveKey } from './menuConfig';
init();
</script>

<style lang="scss" scoped>
.new_project {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 20px 0;
    width: 1360px;
    margin: 0 auto;
    gap: 20px;
}

.content-section {
    flex: 1;
    overflow: auto;
}
.content-section::-webkit-scrollbar {
    width: 0 !important;
}

.left-menu {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    background-color: var(--section-color);
    width: 268px;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.user_info {
    padding: 40px 18px;
    display: flex;
}

.h50 {
    height: 50px;
}

.user_info_content {
    width: 156px;
    margin-left: 10px;
    margin-top: 5px;
}

.user_info_name {
    line-height: 18px;
    font-size: var(--font-size-large);
    color: var(--font-color-active);
}

.user_info_introduction {
    font-size: var(--font-size-small);
    margin-top: 5px;
}

.project-menu {
    .active {
        background-color: var(--menu-active-color);
    }
}

.project-menu-box {
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    padding-left: 44px;
}

.project-menu-name {
    margin-left: 20px;
}

.menu-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    vertical-align: -3px;
}
</style>
